<template>
  <div class="indexContainer">
    <!-- 头部 -->
    <van-sticky>
      <div class="header">
        <img src="../../static/images/logo.png" alt="" />
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          @click="toSearch"
        />
        <!-- <van-button type="danger" size="mini">登录</van-button> -->
        <div class="loginBtn" @click="toLogin">登录</div>
      </div>
      <!-- 导航菜单 -->
      <div class="navMenu">
        <van-tabs @click="handleClick">
          <van-tab class="navItem" title="推荐"></van-tab>
          <van-tab
            class="navItem"
            :title="item.categoryName"
            v-for="item in arr"
            :key="item.categoryId"
          ></van-tab>
        </van-tabs>
      </div>
    </van-sticky>
    <!-- 核心区 -->
    <Recommend v-if="!isShow" />
    <CateList v-if="isShow" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import Recommend from "@/components/Recommend";
import CateList from "@/components/CateList";
export default {
  name: "Home",
  components: { Recommend, CateList },
  data() {
    return {
      value: "",
      isShow: false,
    };
  },
  methods: {
    // 去登录页面
    toLogin() {
      this.$router.push("/login");
    },
    handleClick(index, name) {
      if (index === 0) {
        this.isShow = false;
        return;
      } else {
        this.isShow = true;
        // console.log(this.arr[index-1].categoryId)
        // console.log(this.arr[index-1].categoryName)
        this.$store.dispatch("getCateList", {
          categoryId: this.arr[index - 1].categoryId,
          timestamp: 16301365118,
        });
      }
    },
    // 去搜索页面
    toSearch() {
      this.$router.push("/search");
    },
  },
  computed: {
    ...mapState({
      arr: (state) => state.home.arr,
    }),
  },
};
</script>

<style lang="less" scoped>
.indexContainer {
  height: 100vh;
  background-color: #eeeeee;
  position: relative;
}
.item {
  padding: 10px;
}
// .container {
//   // margin-top: 40px;
// }
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  // position: fixed;
  z-index: 200;
  img {
    width: 1.38rem;
    height: 0.4rem;
  }
  // 头部搜索样式
  .searchInput {
    height: 0.4rem;
    // position: fixed;
  }
  ::v-deep .van-search {
    width: 280px;
  }
  .loginBtn {
    width: 0.74rem;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    color: #dd1a21;
    border: 1px solid #dd1a21;
    border-radius: 0.08rem;
    margin-left: 0.16rem;
    font-size: 0.24rem;
    float: right;
  }
}
// 导航菜单
.navMenu {
  width: 100%;
  position: fixed;
  // position: fixed;
  top: 45px;
  // left: 0;
  z-index: 55;
}
</style>
